import Worker from './line.worker.js';

export default function lineCanvas(obj,self,revokeArr) {
    let canvas = obj.canvas;
    let ctx = canvas.getContext('2d');
  
    let can2 = obj.can2;
    let ctx2 = can2.getContext('2d');
  
    let zoom = obj.zoomScale;

    let rangeColor = obj.rangeColor;
    let range = obj.range;
    let type = obj.type;
  
    self.revokeArr = revokeArr; // 撤销数组
    // 画笔参数设置
    ctx2.strokeStyle = obj.color; // 透明画笔  obj.color
    ctx2.lineWidth = obj.lineWidth;
    ctx2.shadowBlur = obj.shadowBlur;
    ctx2.shadowColor = obj.color;
    ctx2.lineShadowColor = obj.color;
    ctx2.lineCap = 'round';
    ctx2.lineJoin = 'round';
  
  
    can2.addEventListener('touchstart', function (e) {
      e.preventDefault();
      ctx2.beginPath();
      let pos = getCursorPosition(e);
      ctx2.moveTo(pos.x, pos.y);
      self.revokeArr.push(ctx.getImageData(0, 0, canvas.width, canvas.height));
      console.log(revokeArr.length);
    }, { passive: false });
  
    // 绘制中
    can2.addEventListener('touchmove', function (e) {
      e.preventDefault();
      let pos = getCursorPosition(e);
      ctx2.lineTo(pos.x, pos.y);
      ctx2.stroke();
    }, { passive: false });
  
    // 结束绘制
    can2.addEventListener('touchend', function () {
      ctx2.closePath();
      let beforeData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      let afterData = ctx2.getImageData(0, 0, can2.width, can2.height);
      let after = afterData.data;
      let before = beforeData.data;
      let afterPoint = [];
      let len = afterData.data.length;
      for (let i = 0; i < len; i += 4) {
        if (afterData.data[i + 3] != 0) afterPoint.push(i);
      }
      
      // 选择处理类型
      // eraser(afterPoint, before, after, ctx, beforeData);
      // let type = 'eraser'
      switch(type) {
        case 'eraser' : eraser(afterPoint,before,after,ctx,beforeData);break;
        case 'AdjustEdge' : AdjustEdge(afterPoint,before,ctx,beforeData,rangeColor,range,self);break;
      }
      
      ctx2.clearRect(0, 0, can2.width, can2.height);
    }, { passive: false });
  
  
    // 调整画笔位置
    function getCursorPosition(e) {
      let { x: offsetLeft, y: offsetTop } = canvas.getBoundingClientRect();
      return {
        x: (e.changedTouches[0].pageX - offsetLeft) / zoom,
        y: (e.changedTouches[0].pageY - offsetTop) / zoom
      }
    }
  }
  
  /**
   * 橡皮擦功能
   * @param {*} linePoint 
   * @param {*} before 
   * @param {*} after 
   * @param {*} ctx 
   */
  function eraser(linePoint, before, after, ctx, beforeData) {
    let len = linePoint.length;
    for (let i = 0; i < len; i++) {
      let ele = linePoint[i];
      if (before[ele + 3] === 0) continue;
      if (after[ele + 3] === 255) {
        before[ele + 3] = 0;
      } else {
        before[ele + 3] = (before[ele + 3] - after[ele + 3]) >= 0 ? (before[ele + 3] - after[ele + 3]) : 0;
      }
    }
  
    ctx.globalCompositeOperation = 'source-over';
    ctx.putImageData(beforeData, 0, 0);
  }
  
  /**
   * 边缘调整画笔
   * @param {*} linePoint 
   * @param {*} before 
   * @param {*} ctx 
   * @param {*} beforeData 
   * @param {*} color 需要进行检测的颜色值
   */
  function AdjustEdge(linePoint, before, ctx, beforeData, color, range, self) {
    let timer = setTimeout(() => {
      self.isLoading = true
    },300)
    let worker = new Worker();
    worker.postMessage({
      linePoint, before, color, range
    });

    worker.onmessage = function(e) {
      let { before} = e.data;
      clearTimeout(timer)
      beforeData = new ImageData(new Uint8ClampedArray(before),beforeData.width,beforeData.height)
      ctx.globalCompositeOperation = 'source-over';
      ctx.putImageData(beforeData, 0, 0);
      self.isLoading = false
    }
  }
  
  
  
//   function strongLight(linePoint, before, after, ctx) {
//     afterPoint.forEach(ele => {
//       for (j = ele; j < ele + 4; j++) {
//         console.log(j - ele);
//         if (before[j + 3] === 0) break;
//         if (j - ele === 3) {
//           before[j] = 255 - (255 - before[j]) * (255 / after[j]);
//           break;
//         };
//         if (before[j] >= 128) {
//           before[j] = before[j] * after[j - ele] / 128;
//         } else {
//           before[j] = after[j - ele] + (255 - after[j - ele]) * (before[j] - 128) / 128;
//         }
//         // console.log(__ceshi);
//       }
//     })
//     console.log(afterData);
//     // ctx2.globalAlpha = 0.5;
  
//     ctx.globalCompositeOperation = 'source-over';
//     ctx.putImageData(beforeData, 0, 0);
//   }


